<script setup lang="ts">
import comIcon from '../com-icon/com-icon.vue';
import { defineProps } from 'vue';
import { useRouter } from 'vue-router'
const { fn } = defineProps<{ fn?: Function, height?: string, border?: boolean, background?: string }>()

const router = useRouter()
// 返回
const back = () => {
  if (fn) {
    fn()
  } else {
    router.go(-1)
  }
}
</script>
<!--
  导航栏
  返回按钮是固定的
  使用方法 引入该组件
  组件属性：
  height 类型 string 设置导航栏高度
  border 类型 boolean 设置导航栏下边框 :border="true" 可简写为 border
  background 类型 string 设置导航栏背景颜色 默认为白色

  示例：
  <comNavigation height='80px' border>
    // 使用template包裹住内容 使用 v-slot: 来选择需要插入的位置
    // title插槽用来放置标题
    // right插槽用来放置右边内容比如分享、注册按钮等
    <tepmlate v-slot:right>
      内容
    </tepmalte>
  </comNavigation>
-->
<template>
  <div class="navigation_Bar"
    :style="{ height, lineHeight: height ? height : '46px', borderBottom: border ? '1px solid #f2f4f7' : 'none', backgroundColor: background ? background : '#fff' }">
    <div class="back">
      <comIcon name="icons-user-arrow" class="iconBack" @click="back"></comIcon>
    </div>
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
  <div class="seat" :style="{ height }"></div>
</template>
<style lang="scss" scoped>
.navigation_Bar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 12px 0 6px;
  width: calc(100% - 18px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(248, 249, 249);
  z-index: 100;

  .back {
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
    height: 100%;

    .iconBack {
      width: 30px;
      height: 30px;
      font-weight: 400;
      transform: rotate(180deg);
    }
  }

  .title {
    flex: 1;
    height: 100%;
    text-align: center;
  }

  .right {
    flex: 1;
    height: 100%;
    text-align: right;
  }

}

.seat {
  height: 46px;
  width: 100%;
}
</style>
